"use strict";

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _blinkNavigationList = require("./blink.navigation.list.item");

var _blinkNavigationList2 = _interopRequireDefault(_blinkNavigationList);

var _class = require("../tools/class.path");

var _class2 = _interopRequireDefault(_class);

var _blinkNavigationListAnimate = require("./blink.navigation.list.animate.block");

var _blinkNavigationListAnimate2 = _interopRequireDefault(_blinkNavigationListAnimate);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * Created by Blink on 2017/7/19.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * navigation list
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                */

var NavigationList = function (_React$Component) {
    _inherits(NavigationList, _React$Component);

    function NavigationList() {
        _classCallCheck(this, NavigationList);

        var _this = _possibleConstructorReturn(this, (NavigationList.__proto__ || Object.getPrototypeOf(NavigationList)).call(this));

        _this.state = {
            activeIndex: 0,
            hoverIndex: -1
        };
        _this.blocks = [];
        _this.lastHoverBlock = {
            left: 0,
            width: 0
        };
        return _this;
    }

    // return active index


    _createClass(NavigationList, [{
        key: "componentDidMount",
        value: function componentDidMount() {
            this.active = 0;
        }
    }, {
        key: "render",
        value: function render() {
            var _this2 = this;

            var _props = this.props,
                data = _props.data,
                className = _props.className;

            // gen data

            var list = [];
            if (data) {
                var i = 0;
                var _iteratorNormalCompletion = true;
                var _didIteratorError = false;
                var _iteratorError = undefined;

                try {
                    var _loop = function _loop() {
                        var item = _step.value;

                        list.push(_react2.default.createElement(_blinkNavigationList2.default, {
                            active: _this2.active === i,
                            icon: item.icon,
                            key: item.name,
                            text: item.text,
                            onClick: function onClick(index) {
                                if (item.onClick) item.onClick(index, data[index]);
                            },

                            onMouseEnter: function onMouseEnter(index) {
                                _this2.setState({ hoverIndex: index });
                            },

                            index: i,
                            ref: function ref(item) {
                                if (item) _this2.blocks[item.props.index] = item;
                            }
                        }));
                        i += 1;
                    };

                    for (var _iterator = data[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
                        _loop();
                    }
                } catch (err) {
                    _didIteratorError = true;
                    _iteratorError = err;
                } finally {
                    try {
                        if (!_iteratorNormalCompletion && _iterator.return) {
                            _iterator.return();
                        }
                    } finally {
                        if (_didIteratorError) {
                            throw _iteratorError;
                        }
                    }
                }
            }

            var block = void 0;
            if (this.blocks[this.state.activeIndex]) {
                var b = this.blocks[this.state.activeIndex];
                if (b.dom) {
                    block = _react2.default.createElement(_blinkNavigationListAnimate2.default, { zIndex: 2, width: b.dom.clientWidth, left: b.dom.offsetLeft });
                }
            }

            var hover = void 0;
            if (this.state.hoverIndex >= 0 && this.blocks[this.state.hoverIndex] && this.blocks[this.state.hoverIndex].dom) {
                var _b = this.blocks[this.state.hoverIndex].dom;
                this.lastHoverBlock = {
                    left: _b.offsetLeft,
                    width: _b.clientWidth
                };
                hover = _react2.default.createElement(_blinkNavigationListAnimate2.default, { className: "nav-animate-block-transparent",
                    width: _b.clientWidth, left: _b.offsetLeft });
            } else {
                hover = _react2.default.createElement(_blinkNavigationListAnimate2.default, { left: this.lastHoverBlock.left + this.lastHoverBlock.width / 2, className: "nav-animate-block-transparent" });
            }

            return _react2.default.createElement(
                "div",
                { className: "nav-frame" },
                block,
                hover,
                _react2.default.createElement(
                    "ul",
                    { className: (0, _class2.default)("nav", className), onMouseLeave: function onMouseLeave() {
                            _this2.setState({ hoverIndex: -1 });
                        } },
                    list
                )
            );
        }
    }, {
        key: "active",
        get: function get() {
            return this.state.activeIndex;
        },
        set: function set(v) {
            this.setState({ activeIndex: v });
        }
    }]);

    return NavigationList;
}(_react2.default.Component);

NavigationList.defaultProps = {
    animate: false // active is use animate to draw active block
};
exports.default = NavigationList;